<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入头部尾部 -->
    <link rel="stylesheet" href="./css/head.css">
    <link rel="stylesheet" href="./css/footer.css">
    <link rel="stylesheet" href="./css/shopping_cart.css">

    <!-- 引入js文件 -->
    <script src="./lib/jquery.min.js"></script>
    <!-- 引入购物车js -->
    <script src="./js/shopping_cart.js"></script>
</head>

<body>
    <!-- 头部顶部区域 -->
    <div class="head-top">
        <div class="wrapper clearfix">
            <p class="fl">乐购www.legou.com</p>
            <p class="fr">欢迎光临乐购 请 <a href="./log_in.html">登入|</a> <a href="./sign_in.html">注册</a></p>
        </div>
    </div>
    <!-- 头部顶部区域结束 -->

    <!-- 头部logo搜索导航栏区域 -->
    <div class="head-logo wrapper clearfix">
        <!-- logo区域 -->
        <div class="logo fl">
            <h1><a href="index.html"></a></h1>
        </div>
        <!-- 右边区域-->
        <div class="logo-right fl">
            <!-- 搜索框 -->
            <div class="logo-right-searchBox clearfix">
                <form action="#" class="fl">
                    <input type="text fl" placeholder="请输入商品名">
                    <input type="submit" class="fr" value="">
                </form>
                <div class="fl">
                    <a href="#"><i></i><span>购物车</span></a>
                    <a href="#"><span>我的订单</span></a>
                </div>
            </div>
            <!-- 分类列表 -->
            <ul>
                <script>
                    for (let i = 0; i < 16; i++) {
                        document.write(`<li><a href="#">图书</a></li>`)
                    }
                </script>
            </ul>
        </div>
    </div>
    <!-- 头部logo搜索导航栏区域结束 -->

    <div class="shopping_cart wrapper">
        <div class="shopping-top pret">
            <div class="floater pabs"></div>
            <span class="pointer">全部商品<i>3</i></span>
            <span class="not-allowed">活动商品<i>0</i></span>
            <span class="not-allowed">库存紧张<i>0</i></span>
            <p class="fr">温馨提示: 亲爱的顾客, 您还没有登录, 所有商品价格,活动信息以登录后显示为准 <a href="./sign_in.html" class="fr">立即登入</a></p>
        </div>

        <!-- 第一个全选按钮盒子   计算价格-->
        <div class="price">
            <div class="price-left fl">
                <label><input type="checkbox" id="checkAll">全选 </label> <a id="del">删除</a><a href="#">分享</a><a
                    href="#">移入收藏夹</a><a href="#">消除失效宝贝</a>
            </div>

            <div class="price-right fr">
                <span>已选商品</span>
                <span>合计(不含运费) <i id="allprice">0</i></span>
                <span>去结算</span>
            </div>
        </div>

        <!-- 商品第一部分 -->
        <div class="shop">
            <div class="shop-top">
                <input type="checkbox">
                <span>木果果木官方旗舰店</span>
                <span>联系店家</span>
                <span>满2件包邮</span>
            </div>

            <!-- 下方商品区域 -->
            <ul>
                <li>
                    <input type="checkbox" class="fl">
                    <div class="shop-img">
                        <img src="./imgs/shop1.jpg" alt="" class="fl">
                        <p class="fl">木果果木2016秋装新品韩范简约宽松中长款纯棉长袖衬衫</p>
                        <span class="fl">新品</span>
                        <span class="fl">包邮</span>
                    </div>
                    <div class="shop-attribute">
                        <p>颜色: 魅夜黑</p>
                        <p>尺寸: M</p>
                    </div>
                    <div class="shop-price">
                        <span class="total-price">169.00</span>
                        <p>积分 <span>100</span></p>
                    </div>
                    <div class="shop-amount">
                        <button class="jian">-</button>
                        <input type="text" value="1">
                        <button class="jia">+</button>
                    </div>
                    <div class="shop-del">
                        <p>移入收藏夹</p>
                        <p>删除</p>
                        <p>分享</p>
                        <p>相似宝贝</p>
                    </div>
                </li>
                <li>
                    <input type="checkbox" class="fl">
                    <div class="shop-img">
                        <img src="./imgs/shop1.jpg" alt="" class="fl">
                        <p class="fl">木果果木2016秋装新品韩范简约宽松中长款纯棉长袖衬衫</p>
                        <span class="fl">新品</span>
                        <span class="fl">包邮</span>
                    </div>
                    <div class="shop-attribute">
                        <p>颜色: 魅夜黑</p>
                        <p>尺寸: M</p>
                    </div>
                    <div class="shop-price">
                        <span class="total-price">169.00</span>
                        <p>积分 <span>100</span></p>
                    </div>
                    <div class="shop-amount">
                        <button class="jian">-</button>
                        <input type="text" value="1">
                        <button class="jia">+</button>
                    </div>
                    <div class="shop-del">
                        <p>移入收藏夹</p>
                        <p>删除</p>
                        <p>分享</p>
                        <p>相似宝贝</p>
                    </div>
                </li>
            </ul>
        </div>

        <!-- 商品第二部分 -->
        <div class="shop">
            <div class="shop-top">
                <input type="checkbox">
                <span>木果果木官方旗舰店</span>
                <span>联系店家</span>
                <span>满2件包邮</span>
            </div>

            <!-- 下方商品区域 -->
            <ul>
                <li>
                    <input type="checkbox" class="fl">
                    <div class="shop-img">
                        <img src="./imgs/shop1.jpg" alt="" class="fl">
                        <p class="fl">木果果木2016秋装新品韩范简约宽松中长款纯棉长袖衬衫</p>
                        <span class="fl">新品</span>
                        <span class="fl">包邮</span>
                    </div>
                    <div class="shop-attribute">
                        <p>颜色: 魅夜黑</p>
                        <p>尺寸: M</p>
                    </div>
                    <div class="shop-price">
                        <span class="total-price">169.00</span>
                        <p>积分 <span>100</span></p>
                    </div>
                    <div class="shop-amount">
                        <button class="jian">-</button>
                        <input type="text" value="1">
                        <button class="jia">+</button>
                    </div>
                    <div class="shop-del">
                        <p>移入收藏夹</p>
                        <p>删除</p>
                        <p>分享</p>
                        <p>相似宝贝</p>
                    </div>
                </li>
                <li>
                    <input type="checkbox" class="fl">
                    <div class="shop-img">
                        <img src="./imgs/shop1.jpg" alt="" class="fl">
                        <p class="fl">木果果木2016秋装新品韩范简约宽松中长款纯棉长袖衬衫</p>
                        <span class="fl">新品</span>
                        <span class="fl">包邮</span>
                    </div>
                    <div class="shop-attribute">
                        <p>颜色: 魅夜黑</p>
                        <p>尺寸: M</p>
                    </div>
                    <div class="shop-price">
                        <span class="total-price">169.00</span>
                        <p>积分 <span>100</span></p>
                    </div>
                    <div class="shop-amount">
                        <button class="jian">-</button>
                        <input type="text" value="1">
                        <button class="jia">+</button>
                    </div>
                    <div class="shop-del">
                        <p>移入收藏夹</p>
                        <p>删除</p>
                        <p>分享</p>
                        <p>相似宝贝</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <!-- 广告区域 -->

    <div class="ad wrapper">
        <p>猜你喜欢</p>
        <ul>
            <li>
                <img src="./imgs/shop1.jpg" alt="">
                <p>AIVEI秋新中长款牛仔</p>
                <p>¥ 79.00</p>
            </li>
            <script>
                for (let i = 0; i < 5; i++) {
                    document.write(`<li>
                <img src="./imgs/shop1.jpg" alt="">
                <p>AIVEI秋新中长款牛仔</p>
                <p>¥ 79.00</p>
            </li>`)
                }
            </script>
        </ul>
    </div>

    <!-- 公共样式搜索区 -->
    <div class="search_panel">
        <a href="//www.mi.com/index.html"></a>
        <script>
            $('.logo-right-searchBox form').clone(true).appendTo($('.search_panel'))
            $(window).scroll(function () {
                scrollY > 200 ? $('.search_panel').show() : $('.search_panel').hide()
            })
        </script>
    </div>


    <!-- 页脚区域 -->
    <div class="footer">
        <div class="wrapper">
            <div class="footer-top">
                <ul>
                    <li>
                        <img src="./imgs/CgQI0lWskgmADBnsAAAPZvcSh3E68900~1.jpg" alt="">
                        <div>
                            <h4>正品保障</h4>
                            <p>收货时间由你做主</p>
                        </div>
                    </li>
                    <li>
                        <img src="./imgs/CgQIz1WslI-Adao3AAAN5b_ut2I80100~1.jpg" alt="">
                        <div>
                            <h4>正品保障</h4>
                            <p>收货时间由你做主</p>
                        </div>
                    </li>
                    <li>
                        <img src="./imgs/ChEbulWsk4iADa_aAAAM544hHN818600~1.jpg" alt="">
                        <div>
                            <h4>正品保障</h4>
                            <p>收货时间由你做主</p>
                        </div>
                    </li>
                    <li>
                        <img src="./imgs/ChEi11WsyiyALBbiAAAN9lEEK5M33200~1.jpg" alt="">
                        <div>
                            <h4>正品保障</h4>
                            <p>收货时间由你做主</p>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="footer-center clearfix">
                <dl>
                    <dt>新手入门</dt>
                    <dd>购物流程</dd>
                    <dd>购物流程</dd>
                    <dd>购物流程</dd>
                    <dd>服务协议及隐私说明</dd>
                    <dd>购物流程</dd>
                </dl>
                <dl>
                    <dt>新手入门</dt>
                    <dd>购物流程</dd>
                    <dd>购物流程</dd>
                    <dd>购物流程</dd>
                    <dd>礼品卡支付</dd>
                    <dd>购物流程</dd>
                </dl>
                <dl>
                    <dt>新手入门</dt>
                    <dd>购物流程</dd>
                    <dd>商品验货与签收</dd>
                </dl>
                <dl>
                    <dt>新手入门</dt>
                    <dd>购物流程</dd>
                    <dd>退换货政策</dd>
                </dl>

                <div class="qr-img fl">
                    <ul class="fl">
                        <li>
                            <p>App更优惠</p>
                            <img src="./imgs/qryhd.png" alt="">
                        </li>
                        <li>
                            <p>加微信查订单</p>
                            <img src="./imgs/qryhd.png" alt="">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-buttom">
            <div class="wrapper">
                <p>沪ICP备XXXXXXXXX号 | 经营证照 | 互联网药品信息服务资格证(沪)-经营性-2017-0006 | 违法和不良信息举报电话：XXX-XXXXXXXX | 沪B2-XXXXXXX |
                </p>
                <p>沪公网安备 XXXXXXXXX号 | 友情链接 | 出版物经营许可证 | 增值电信业务经营许可证</p>
                <ul>
                    <li><img src="./imgs/footer1.png" alt=""></li>
                    <li><img src="./imgs/footer1.png" alt=""></li>
                    <li><img src="./imgs/footer1.png" alt=""></li>
                    <li><img src="./imgs/footer1.png" alt=""></li>
                    <li><img src="./imgs/footer2.jpg" alt=""></li>
                </ul>
            </div>

        </div>
    </div>
</body>

</html>